<template>
  <div v-if="isShow" class="typed-modal">
    <div class="typed-box">
      <div class="typed-oldFont">{{ incantation }}</div>
      <div
        @input="inputChange"
        ref="incantainerRef"
        contenteditable
        class="typed-font"
      >
        {{ font }}
      </div>
    </div>
  </div>
  <ClickIcon
    class="like"
    :options="defaultOption"
    :height="450"
    :width="720"
    ref="lottie"
  ></ClickIcon>
</template>

<script setup lang="ts">
import { ref, defineEmits, nextTick, reactive, Ref } from "vue";
import ClickIcon from "../lottie/clickIcon.vue";
import animationData from "/public/lottie.json";

const defaultOptions = {
  name: "like",
  animationData: animationData,
  autoplay: false,
  loop: false,
};

const emit = defineEmits(["completeOver"])
const isShow = ref(true);
const lottie = ref(null) as Ref;
const incantainerRef = ref(null) as Ref;
const defaultOption = reactive(defaultOptions);
const incantation = ref("Happy Mid-autumn Day");
let font = ref("_");

nextTick(() => {
  incantainerRef.value.focus();
});

function inputChange(e: any) {
  let text = e.target.innerText.replace("_", "");
  if (!incantation.value.startsWith(text)) {
    e.target.innerText = font.value;
  } else {
    if (incantation.value.length === text.length) {
      emit("completeOver");
      font.value = text;
      isShow.value = false;
      lottie.value.toggle();
    } else {
      font.value = text + "_";
    }
  }
}
</script>

<style lang="scss" scoped>
.typed-modal {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background: rgba($color: #000, $alpha: 0.6);
  .typed-box {
    width: 200px;
    height: 10px;
    background: #829ada;
    border-radius: 4px;
    box-shadow: 1px 2px 4px #7992d6;
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    display: flex;
    align-items: center;
    .typed-oldFont {
      position: absolute;
      color: rgba(#fff, $alpha: 0.5);
      z-index: -1;
    }
    .typed-font {
      color: #fff;
      &:focus {
        outline: none;
      }
    }
  }
}
.like {
  pointer-events: none;
}
.like >>> iconBox {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
